<template>
    <h3>列表渲染</h3>
    <!-- v-for可以遍历数组和对象 -->
    <!-- 遍历数组有两个属性，item 和 index -->
    <!-- 遍历对象有三个属性，item，key 和 index -->
    <!-- item in items 也可以写成 item of items -->
    <!-- v-for 的key属性可以绑定index(或index.id)，当元素的顺序发生变化时，不再重新渲染而是更换位置 -->
    <p v-for="item in names">{{ item }}</p>
    <h4>新闻头条</h4>
    <div v-for="(item, index) in result">
        <h4>{{ index }}-{{ item.title }}</h4>
        <p>{{ index }}-{{ item.content }}</p>
    </div>
    <div v-for="(item, key, index) of object">{{ index }}-{{ key }}-{{ item }}</div>
</template>

<script>
export default{
    data(){
        return{
            names:["123","456","789"],
            result:[{
                    "title":"震惊1",
                    "content":"饿了居然可以吃饭！"
                },
                {
                    "title":"震惊2",
                    "content":"渴了居然可以喝水！"
                },
                {
                    "title":"震惊3",
                    "content":"困了居然可以睡觉！"
                }                    
                ],
            object:{
                name:"niubee",
                age:"30",
                sex:"男"
            }
        }
    }
}
</script>